﻿'use client'

import { useState } from 'react'
import { QrCode, RotateCcw, Download } from 'lucide-react'

export default function QrCodeGeneratorPage() {
  const [input, setInput] = useState('')
  const [qrCodeUrl, setQrCodeUrl] = useState('')
  const [size, setSize] = useState(200)
  const [errorLevel, setErrorLevel] = useState('M')

  const generateQRCode = () => {
    if (!input.trim()) {
      setQrCodeUrl('')
      return
    }

    // 使用免费的QR码API服务
    const encodedText = encodeURIComponent(input)
    const url = https://api.qrserver.com/v1/create-qr-code/?size=x&data=&ecc=
    setQrCodeUrl(url)
  }

  const handleInputChange = (value: string) => {
    setInput(value)
    if (value.trim()) {
      setTimeout(() => {
        const encodedText = encodeURIComponent(value)
        const url = https://api.qrserver.com/v1/create-qr-code/?size=x&data=&ecc=
        setQrCodeUrl(url)
      }, 500)
    } else {
      setQrCodeUrl('')
    }
  }

  const downloadQRCode = () => {
    if (qrCodeUrl) {
      const link = document.createElement('a')
      link.href = qrCodeUrl
      link.download = 'qrcode.png'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">二维码生成器</h1>
          <p className="text-gray-600">将文本、URL等内容生成二维码，支持自定义样式</p>
        </div>

        <div className="mb-6 flex gap-4">
          <button
            onClick={generateQRCode}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
          >
            <QrCode className="w-4 h-4" />
            生成二维码
          </button>
          <button
            onClick={downloadQRCode}
            disabled={!qrCodeUrl}
            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
          >
            <Download className="w-4 h-4" />
            下载图片
          </button>
          <button
            onClick={() => { setInput(''); setQrCodeUrl('') }}
            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center gap-2"
          >
            <RotateCcw className="w-4 h-4" />
            清空
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-700">输入内容</label>
              <textarea
                value={input}
                onChange={(e) => handleInputChange(e.target.value)}
                placeholder="输入要生成二维码的文本、URL等内容..."
                rows={6}
                className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>

            <div className="bg-white p-4 rounded-lg border border-gray-200">
              <h4 className="font-medium text-gray-900 mb-3">生成选项</h4>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    尺寸: {size}x{size} 像素
                  </label>
                  <input
                    type="range"
                    min="100"
                    max="500"
                    step="50"
                    value={size}
                    onChange={(e) => {
                      setSize(parseInt(e.target.value))
                      if (input.trim()) {
                        setTimeout(generateQRCode, 100)
                      }
                    }}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>100px</span>
                    <span>500px</span>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">容错级别</label>
                  <select
                    value={errorLevel}
                    onChange={(e) => {
                      setErrorLevel(e.target.value)
                      if (input.trim()) {
                        setTimeout(generateQRCode, 100)
                      }
                    }}
                    className="w-full p-2 border border-gray-300 rounded-md"
                  >
                    <option value="L">低 (L) - 约7%</option>
                    <option value="M">中 (M) - 约15%</option>
                    <option value="Q">较高 (Q) - 约25%</option>
                    <option value="H">高 (H) - 约30%</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-700">生成的二维码</label>
              <div className="bg-white border border-gray-300 rounded-lg p-8 min-h-[300px] flex items-center justify-center">
                {qrCodeUrl ? (
                  <div className="text-center">
                    <img
                      src={qrCodeUrl}
                      alt="Generated QR Code"
                      className="mx-auto mb-4 border border-gray-200 rounded"
                      style={{ width: size, height: size }}
                    />
                    <p className="text-sm text-gray-600">
                      {size}x{size} 像素，容错级别: {errorLevel}
                    </p>
                  </div>
                ) : (
                  <div className="text-center text-gray-500">
                    <QrCode className="w-16 h-16 mx-auto mb-4 text-gray-300" />
                    <p className="text-sm">二维码将在这里显示</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="mt-8 bg-gray-50 p-4 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">快速生成</h4>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
              onClick={() => handleInputChange('https://www.example.com')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">网站链接</div>
              <div className="text-xs text-gray-500 mt-1">https://www.example.com</div>
            </button>
            <button
              onClick={() => handleInputChange('Hello, World! 这是一个测试二维码。')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">文本内容</div>
              <div className="text-xs text-gray-500 mt-1">Hello, World! 这是一个测试...</div>
            </button>
            <button
              onClick={() => handleInputChange('tel:+86-138-0013-8000')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">电话号码</div>
              <div className="text-xs text-gray-500 mt-1">tel:+86-138-0013-8000</div>
            </button>
          </div>
        </div>

        <div className="mt-6 bg-blue-50 p-4 rounded-lg">
          <h4 className="font-medium text-blue-900 mb-2">支持的内容类型</h4>
          <ul className="text-blue-800 text-sm space-y-1">
            <li>• <strong>网址:</strong> http://example.com 或 https://example.com</li>
            <li>• <strong>电话:</strong> tel:+86-138-0013-8000</li>
            <li>• <strong>邮箱:</strong> mailto:example@email.com</li>
            <li>• <strong>短信:</strong> sms:+86-138-0013-8000</li>
            <li>• <strong>WiFi:</strong> WIFI:T:WPA;S:网络名;P:密码;;</li>
            <li>• <strong>纯文本:</strong> 任何文本内容</li>
            <li>• <strong>容错级别:</strong> 级别越高，二维码越复杂但容错能力越强</li>
          </ul>
        </div>
      </div>
    </div>
  )
}
